<template>
  <div class="schedule">
    <div class="schedule-title">{{ title }} 
      <span class="schedule-add" @click="addachedule(true)"><i class="el-icon-plus"></i></span>
    </div>
    <div class="shedule-body" ref="scrollContainer" v-loading="loadObj.shedule">
      <div class="schedule-item" v-for="(item, index) in scheduleArr" :key="index" v-if="scheduleArr.length > 0">
        <div class="shedule-date">{{ item.start }}-{{ item.end }}</div>
        <div class="shedule-detail">{{ item.title }}</div>
      </div>
      <div class="schedule-item is-select-item" v-for="(item, index) in memoArr" :key="index" v-if="memoArr.length > 0">
        <div class="shedule-date">{{ item.title }}</div>
        <div class="shedule-detail">{{ item.remark }}</div>
        <div class="shedule-opreate">
          <i class="el-icon-edit-outline icon-edit" @click="addachedule(false, item, '备忘录')"></i>
          <i class="el-icon-delete icon-del" @click="delSchedule(item, '备忘录')"></i>
        </div>
      </div>
      <template v-if="isEmpty">
        <div class="empty-text">暂无数据</div>
      </template>
    </div>
    <div class="schedule-bottom">
      <i class="schedule-more el-icon-d-arrow-right" @click="scheduleMore"></i>
    </div>
    <el-dialog custom-class="custom-dialog" v-loading="loadObj.sheduleDialog" :title="isAdd ? '添加日程' : '修改日程'" :visible.sync="dialogVisible" width="8rem">
      <div class="dialog-body">
        <el-form ref="form" :model="form" label-width="0.7rem">
          <el-form-item label="日期">
            <el-col :span="11">
              <el-date-picker type="date" size="mini" placeholder="选择日期" v-model="form.date.date1"
                :format="'yyyy年MM月dd日'" value-format='yyyy-MM-dd' style="width: 60%"  :picker-options="startTimeOptions" :clearable="false"></el-date-picker>
              <el-time-picker placeholder="选择时间" size="mini" v-model="form.tiem.tiem1" style="width: 30%"
                :clearable="false" :format="'HH:mm'" value-format="HH:mm"></el-time-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" size="mini" placeholder="选择日期" v-model="form.date.date2"
                :format="'yyyy年MM月dd日'" value-format='yyyy-MM-dd' style="width: 60%" :picker-options="endTimeOptions" :clearable="false"></el-date-picker>
              <el-time-picker placeholder="选择时间" size="mini" v-model="form.tiem.tiem2" style="width: 30%"
                :clearable="false" :format="'HH:mm'" value-format="HH:mm"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="form.name" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" size="mini" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirm(form, isAdd)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCurrentSchedule,
  addCurrentSchedule,
  modifyCurrentSchedule,
  delCurrentSchedule
} from '@/api/index'
export default {
  name: '',
  mixins: [],
  components: {
  },
  props: {
  },
  data() {
    return {
      sid: '',
      title: '日程详情',
      scheduleArr: [],
      memoArr: [],
      dialogVisible: false,
      confirmDialogVisible: false,
      isAdd: true,
      form: {
        name: '',
        region: '',
        date: {
          date1: '',
          date2: '',
        },
        tiem: {
          tiem1: '',
          tiem2: '',
        },
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        id: ''
      },
      todaySchedule: '',
      isEmpty: false,
      startTimeOptions: {
        disabledDate: this.disableStartTime
      },
      endTimeOptions: {
        disabledDate: this.disableEndTime
      },
      loadObj: {
        shedule: false,
        sheduleDialog: false
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.sid = this._sid;
  },
  mounted() {

  },
  methods: {
    disableStartTime(time) {
      console.log("this.form.date.date1111", this.form.date.date1)
      console.log("this.form.date.date2111", this.form.date.date2)
      let endTime = new Date(this.form.date.date2)
      if(!this.form.date.date2) {
        return true
      }
      return endTime.getTime() <= time.getTime()
    },
    disableEndTime(time) {
      console.log("this.form.date.date1", this.form.date.date1)
      if(!this.form.date.date1) {
        return true
      }
      let startTime = new Date(this.form.date.date1).getTime() - 24 * 60 * 60 * 1000
      let time2 = time.getTime() 
      return  startTime >= time.getTime() 
    },
    scheduleMore() {
      // 获取到滚动容器的引用
      const container = this.$refs.scrollContainer;
      // 设置滚动的距离，这里设置为每次点击滚动100px
      const scrollAmount = 100;
      // 使用scrollBy方法向下滚动
      container.scrollBy({ top: scrollAmount, behavior: 'smooth' });
    },
    delSchedule(item) {
      this.$confirm('确定删除该日程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.loadObj.sheduleDialog = true
        console.log('用户点击了“确定”');
        // 确保这里没有返回一个被拒绝的 Promise
        delCurrentSchedule(this.sid, item.id)
          .then(response => {
            this.loadObj.sheduleDialog = false
            console.log('删除成功', response);
            this.messageDate(this.todaySchedule)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(error => {
            this.loadObj.sheduleDialog = false
            console.error('删除失败', error);
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          });
      }).catch(action => {
        // 注意这里的参数是 action，它代表用户点击了“取消”或关闭了对话框
        console.log('用户点击了“取消”或关闭了对话框', action);
        // this.loadObj.sheduleDialog = false
        if (action === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        }
      });
    },
    addachedule(bool, item, cut) {
      this.isAdd = bool;
      this.dialogVisible = true;
      console.log(item, 'item的数据！！！')
      if (!bool) {
        this.form.date.date1 = item.sdate.substring(0, 10);
        this.form.date.date2 = item.edate.substring(0, 10);
        this.form.tiem.tiem1 = item.sdate.substring(11, 16);
        this.form.tiem.tiem2 = item.edate.substring(11, 16);
        this.form.name = item.title;
        this.form.desc = item.remark;
        this.form.id = item.id;
      }else {
        let currentTime = new Date()
        this.form.date.date1 = this.getDateTime(currentTime, 'day')
        this.form.date.date2 = this.getDateTime(currentTime, 'day');
        this.form.tiem.tiem1 = this.getDateTime(currentTime, 'hours')
        this.form.tiem.tiem2 = "23:59"
      }
    },
    getDateTime(date, type) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1 // 月份从0开始，因此需要加1
      const day = date.getDate()
      const hours = date.getHours()
      const minutes = date.getMinutes()
      if(type == 'day') {
        let formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        return formattedDate
      }else {
        let formattedDate = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
        return formattedDate
      }
    },
    confirm(item, cut) {
      if (cut) {
        const sdate = item.date.date1 + ' ' + item.tiem.tiem1;
        const edate = item.date.date2 + ' ' + item.tiem.tiem2;
        const title = item.name;
        const remark = item.desc;
        this.$confirm('确定添加该日程?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // type: 'warning'
        }).then(() => {
          addCurrentSchedule(this.sid, sdate, edate, title, remark)
            .then(response => {
              console.log(response, '当前日程！！！')
              this.dialogVisible = false;
              this.messageDate(this.todaySchedule)
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
            })
            .catch(error => {
              console.error('添加当前日程失败', error);
              if (error.response && error.response.data && error.response.data.errorCode === '400') {
                console.error(error.response.data.msg);
              }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });
        });
      } else {
        this.$confirm('确定修改该日程?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // type: 'warning'
        }).then(() => {
          const sdate = this.form.date.date1 + ' ' + this.form.tiem.tiem1;
          const edate = this.form.date.date2 + ' ' + this.form.tiem.tiem2;
          const title = this.form.name;
          const remark = this.form.desc;
          const id = this.form.id;
          modifyCurrentSchedule(this.sid, sdate, edate, title, remark, id)
            .then(response => {
              console.log(response, '当前日程！！！')
              this.dialogVisible = false;
              this.messageDate(this.todaySchedule)
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
            })
            .catch(error => {
              console.error('修改当前日程失败', error);
              if (error.response && error.response.data && error.response.data.errorCode === '400') {
                console.error(error.response.data.msg);
              }
            });
        }).catch((error) => {
          console.log('问题反馈', error)
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      }

    },
    //获取日历日程信息
    messageDate(message) {
      console.log('通信时间', message)
      this.loadObj.shedule = true
      this.todaySchedule = message;
      getCurrentSchedule(this.sid, message)
        .then(response => {
          console.log(response, '当前日程！！！')
          this.scheduleArr = response.data.metting;
          this.memoArr = response.data.bwl;
          this.isEmpty = this.scheduleArr.length < 1 && this.memoArr.length < 1;
          console.log( this.isEmpty,' this.isEmpty')
          this.loadObj.shedule = false;
          this.$emit('dataFromChild',  this.isEmpty);
        })
        .catch(error => {
          this.loadObj.shedule = false
          console.error('获取当前日程失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    },
    confirmDel() {

    }
  }
}
</script>

<style scoped lang="scss">
@import "../style/common.scss";

.schedule {
  font-size: $small-size;

  .schedule-title {
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.15rem;
    position: relative;
  }

  .shedule-body {
    height: 2.65625rem;
    overflow-y: auto;
    scrollbar-width: none;


    .schedule-item {
      margin: 0.1rem 0;
      padding: 0.2rem;
      text-align: left;
      cursor: pointer;
      position: relative;



      .shedule-date {
        color: #3b6fe1;
        font-weight: bold;
        position: relative;
        padding-left: 0.05rem;
        font-size: $title-size2;

        &:before {
          content: "";
          position: absolute;
          height: 0.12rem;
          width: 0.12rem;
          left: -0.2rem;
          top: 0.07rem;
          bottom: -0.1rem;
          border-radius: 100%;
          background-color: #3b6fe1;
        }
      }

      .shedule-detail {
        font-size: $min-size;
        color: #979696;
        position: relative;
        padding: 0.05rem 0.08rem;
        cursor: pointer;
        line-height: 180%;
        margin-top: 0.05rem;
        width: 75%;
      }

      .shedule-opreate {
        position: absolute;
        right: 0.2rem;
        top: 0.05rem;
        color: #2b2b2b;
        font-size: 0.22rem;
        display: none;

        i {
          width: 0.4rem;
          height: 0.4rem;
          display: flex;
          text-align: center;
          border-radius: 0.12rem;
          background: #fff;
          justify-content: center;
          align-items: center;
          margin: 0.1rem 0;
        }
      }
    }

    .is-select-item {
      &:hover {
        border-radius: 0.15rem;
        background-color: #eef2fc;
        box-shadow: 0rem 0.05rem 0.1rem #ebebeb;

        .shedule-date {
          padding-left: 0.3rem;

          // margin-left: 0.1rem;
          &:before {
            left: 0rem;
            border-radius: 100%;
            height: 0.12rem;
            width: 0.12rem;
          }
        }

        .shedule-opreate {
          display: block;
        }
      }
    }
  }
  .schedule-add {
    background-color: #fff;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 0.3rem;
    width: 0.6rem;
    height: 0.6rem;
    box-shadow: 0rem 0rem 0.1rem #ebebeb;
    cursor: pointer;
    position: absolute;
    right: 0rem;
    top: -0.1rem;
  }

  .schedule-bottom {
    position: relative;
    text-align: right;
    display: flex;
    justify-content: end;
    margin-top: 0.2rem;
    .schedule-more {
      position: absolute;
      bottom: 0.1rem;
      color: #c6daf5;
      transform: rotate(90deg);
      font-size: 0.3rem;
      left: calc(50% - 0.15rem);
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
@import "../style/common.scss";

.custom-dialog {
  border-radius: 0.2rem !important;

  .el-dialog__header {
    text-align: left;
  }

  .el-dialog__title {
    font-size: $title-size2;
  }

  .el-dialog__body {
    padding: 0 0.6rem;
  }

  .el-form-item {
    margin-bottom: 0.1rem;

    .el-form-item__content {
      display: flex;
      align-items: center;
      height: 0.6rem;

      .el-col {
        display: flex;
        justify-content: left;

        .el-date-editor {
          .el-input__inner {
            padding-left: 10px;
            padding-right: 10px;
          }

          .el-input__prefix {
            display: none;
          }
        }
      }
    }
  }

  .el-form-item__label {
    font-size: 0.2rem;
    line-height: 0.6rem;
  }

  .el-button--mini {
    font-size: $min-size;
    padding: 0.1rem 0.3rem;
  }

  .prompt-body {
    font-size: $small-size;
    padding: 0.35rem 0.2rem 0.1rem 0.2rem;
    color: #333;
  }
}

.confirm-dialog {
  .el-dialog__header {
    display: none;
  }

  .el-dialog__footer {
    text-align: center;
  }
}
</style>